<template>
    <NavBar></NavBar>
    <ContentField>
     <h2 style="text-align:center;margin-bottom: 20px;">班级题集发布信息</h2>
     <h2><router-link class="btn btn-sm btn-success" style="width: 15%;" :to="{name: 'publishSet', params: {classId : classId}}">发布题集</router-link></h2>

     <table class="table  table-primary  table-striped table-hover" style="margin-bottom: 10px;">
        <thead class="table-dark text-center" >
            <tr>
            <th>序号</th>
            <th scope="col">id</th>
            <th scope="col">题集id(setId)</th>
            <th scope="col">班级id(classId)</th>
            <th scope="col">发布时间(createDate)</th>
            <th></th>
            </tr>
        </thead>
        <tbody class="text-center">
            <tr v-for="(item, index) in pubs" :key="item.id">
                <th>{{ index + 1 }}</th>
                <td>{{ item.id }}</td>
                <td>{{ item.setId }}</td>
                <td>{{ item.classId }}</td>
                <td>{{ formatDate(item.publishDate,"yyyy-MM-dd ") }}</td>
                <td>
                    <button class="btn btn-sm btn-primary" style="margin-right:5px;" @click="deleteSetInfo(item.setId, item.classId)">删除</button>
                </td>
            </tr>
        </tbody>
    </table>

    <span aria-label="Page navigation example">
        <ul class="pagination" style="float:left">
            <li class="page-item disabled">
                <a class="page-link">每页&nbsp;&nbsp;<span style="color:blue;">{{ pageSize }}</span>&nbsp;&nbsp;条数据</a>
            </li>
            <li class="page-item disabled">
                <a class="page-link" :pageNum="pageNum">当前为第&nbsp;&nbsp;<span style="color:blue;">{{ pageNum }}</span>&nbsp;&nbsp;页</a>
            </li>
            <li class="page-item disabled">
                <a class="page-link">总共&nbsp;&nbsp;<span style="color:blue;">{{ totalPage }}</span>&nbsp;&nbsp;页</a>
            </li>
        </ul>
        <ul class="pagination" style="float:right">
            <li class='page-item'>
                <a v-if="isFirstPage" class="page-link disabled">上一页</a>
                <a v-else class="page-link" @click="getPage( classId, prePage, pageSize )">上一页</a>
            </li>

            <li class="page-item" v-for="(item, index) in totalPage" :key="index">
                <a  class="page-link" @click="getPage(classId, item,pageSize)">{{ item }}</a>
            </li>
            <li class= 'page-item'>
                <a  v-if="isLastPage" class="page-link disabled">下一页</a>
                <a  v-else class="page-link" @click="getPage(classId, nextPage,pageSize )">下一页</a>  
            </li>
        </ul>
    </span>
    </ContentField>

 </template>
 

 <script>
 
 import NavBar from "@/components/teacher/NavBar.vue";
 import ContentField from '@/components/commons/ContentField.vue';
 import {useStore} from 'vuex';
 import {useRoute} from 'vue-router';
 import formatDate from '@/utils/DateFormatter';
 import {ref} from 'vue';
 import $ from 'jquery';

//  import router from '@/router/index';


//classId是已知的

 export default{
     name: 'addPro',
     components: {
         NavBar,
         ContentField,
     },
     computed: {
        formatDate(){
            return formatDate;
        },
    },

     setup(){

        const store = useStore();
        const route = useRoute();
        let classId = route.params.classId;
        let pubs = ref([]);

        let PageNum = 1 ;  //当前页数
        let PageSize = 6 ; //每页数据条数
        let pageNum = ref('');  //当前页数  变量  用于前端渲染
        let pageSize = ref('');  //每页数据条数  变量  用于前端渲染
        let totalNum = ref('');  //总条数
        let totalPage = ref(''); //总页数
        let isFirstPage = ref('');  //是否为第一页
        let isLastPage = ref('');  //是否为最后一页
        let nextPage = ref("");  //下一页
        let prePage = ref("");   //前一页
    
        pageSize.value = 1;
        pageNum.value = 5;
        totalPage.value = 3;
        isFirstPage.value = true;
        isLastPage.value = false;
        nextPage.value = 2;
        prePage.value = 1;

        const updatePageInfo = (pageNum,pageSize)=>{  //更新当前页数和每页大小
            PageNum = pageNum.value;
            PageSize = pageSize.value;
        }

        const getPage = (CId, PageNum, PageSize)=> {

            $.ajax({  //通过CId获取所有题集
                url: 'http://localhost:8090/sls/publish/getPageInfoByCId/' +CId + '/' + PageNum +'/' + PageSize ,
                type: 'get',
                headers: {
                    Authorization: "Bearer " +store.state.user.token,
                },
                success(resp){
                    
                    console.log(resp);
                    pubs.value = resp.list;  //获取所有题集信息

                    totalNum.value = resp.total;
                    totalPage.value = resp.pages;
                    pageNum.value = resp.pageNum;
                    pageSize.value = resp.pageSize;
                    isFirstPage.value = resp.isFirstPage;
                    isLastPage.value = resp.isLastPage;
                    nextPage.value = resp.nextPage;
                    prePage.value = resp.prePage;

                    updatePageInfo(pageNum, pageSize);

                },
                error(resp){
                    console.log(resp);
                }
            });
        }

    getPage(classId, PageNum, PageSize);

    const deleteSetInfo = (setId, classId) => {
        console.log("setId: ");
        console.log(setId);
        console.log("classId: ");
        console.log(classId);

        $.ajax({  //通过CId获取所有题集
                url: 'http://localhost:8090/sls/publish/deletePublishInfo' ,
                type: 'post',
                headers: {
                    Authorization: "Bearer " +store.state.user.token,
                },
                data: {
                    setId: setId,
                    classId: classId,
                },
                success(resp){ 
                    console.log(resp);
                    getPage(classId, PageNum, PageSize);
                },
                error(resp){
                    console.log(resp);
                }
            });


    }


    return{

        updatePageInfo,
        deleteSetInfo,
        getPage,

        pubs,
        classId,

        PageNum,
        PageSize,
        pageNum,
        pageSize,
        totalNum,
        totalPage,
        isFirstPage,
        isLastPage,
        nextPage,
        prePage,

         }
    
     }

 }
 
 </script>
 
 
 
 <style scoped>

 </style>